<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>订单详情</title>
    <link rel="stylesheet" href="/style/weui.css"/>
    <link rel="stylesheet" href="/style/swiper.min.css"/>
    <link rel="stylesheet" href="/style/example.css"/>
    <link rel="stylesheet" href="/style/sweetalert.css"/>
</head>
<body ontouchstart>
<div class="page">
    <div style="padding-bottom: 50px">
    <!-- order status -->
        <div class="weui-cells first-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p style="float: left">订单编号：<?=$bill['billNo']?></p>
                    <p style="float: right"><?=$bill['statusName']?></p>
                </div>
            </div>
        </div>
        <!-- order status end -->
        <!-- 收货信息 -->
        <div class="weui-cells top-5-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p style="float: left">门店：<?=$bill['ShopName']?></p>
                    <p style="float: right"><?=$bill['address']?></p>
                </div>
            </div>
        </div>
        <!-- 收货信息 end-->
        <!-- 商品信息 -->
        <div class="weui-cells weui-cells_form top-5-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd text-center">
                    <h4>商品信息 - 共 <?=$bill['totalQty']?> 件</h4>
                </div>
            </div>
            <!-- list -->
            <?php foreach ($bill['dtl'] as $dtl){  ?>
                <div class="weui-cell" name="goodsBox"  style="clear: both">
                    <div class="weui-cell__bd" style="width: 30%">
                        <?=$dtl['materielName']?>
                    </div>
                    <div class="weui-cell__bd text-center" style="width: 30%">
                        <?=$dtl['orderUnit']?>
                    </div>
                    <div class="weui-cell__bd text-center" style="width: 20%">
                        <?=$dtl['qty']?>/<?=$dtl['deliverQty']?>
                    </div>
                    <?php if($bill['billStatus'] == 2) { ?>
                    <div class="weui-cell__bd text-center" style="width: 20%">
                        <input type="hidden" name="materielId" value="<?=$dtl['materielId']?>">
                        <input type="hidden" name="deliverQty" value="<?=$dtl['deliverQty']?>">
                        <input type="number" name="amount" style="height: 25px;border: 1px solid #e7e7e7;padding: 0 10px;font-size: 12px;width: 70%" placeholder="收货数量" value="<?=$dtl['deliverQty']?>">
                    </div>
                    <?php } ?>
                    <?php if($bill['billStatus'] == 3) { ?>
                        <div class="weui-cell__bd text-center" style="width: 20%">
                            <?=$dtl['receiptQty']?>
                        </div>
                    <?php } ?>
                </div>

                <?php if($bill['billStatus'] == 2) { ?>
                    <div class="weui-cell">
                        <div name="uploader" class="weui-cell__bd">
                            <ul class="weui-uploader__files"></ul>
                            <div class="weui-uploader__input-box" style="margin: 0;">
                                <i class="icon iconfont icon-upload"></i>
                                <p>拍照上传</p>
                                <input name="btnUpload" class="weui-uploader__input" type="file" accept="image/*"
                                       multiple="" data-id="<?= $dtl['materielId'] ?>">
                            </div>
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__bd text-center" style="width: 20%">
                            <input type="text" id="remark<?= $dtl['materielId'] ?>" style="height: 25px;border: 1px solid #e7e7e7;padding: 0 10px;font-size: 12px;width: 90%" placeholder="备注信息">
                        </div>
                    </div>
                <?php } ?>
                <?php if($bill['billStatus'] == 3) { ?>
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <?=$dtl['remark']?>
                        </div>
                    </div>
                <?php } ?>
            <?php } ?>
            <!-- list end-->
        </div>
    </div>
    <!-- 商品信息 end-->
    <?php if($bill['billStatus'] == 2) { ?>
        <div class="weui-tabbar" style="position: fixed;">
            <div class="weui-btn-box">
                <input type="hidden" id="billNo" value="<?=$bill['billNo']?>">
                <a href="javascript:void(0);" class="weui-btn weui-btn_warn" id="confirmReceipt">确认收货</a>
            </div>
        </div>
    <?php } ?>
</div>

<div id="loadingToast" style="opacity: 0; display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
    </div>
</div>

<script src="/js/zepto.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
<script src="/js/swiper.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>

<script>
    $(function(){

        // loading
        var $loadingToast = $('#loadingToast');
        $('.weui-uploader__input-box').on('click', function(){
            if ($loadingToast.css('display') != 'none') return;
            $loadingToast.fadeIn(100);
            setTimeout(function () {
                $loadingToast.fadeOut(100);
            }, 1000);
        });

        //删除
        $(document).on('click', 'img[name=del]', function () {
            console.log('ASAS');
            var num = $(this).attr('num');
            var code = $(this).attr('code');
            delete uploaData[code][num];
            $(this).parent().remove();
        });

        var di = 0, uploaData = {};
        $(document).on("change", 'input[name=btnUpload]', function() {
            var _this = this;
            var files = $(this)[0].files;
            var index = 0;
            var materielId = $(this).attr('data-id');
            if (!uploaData.hasOwnProperty(materielId)) uploaData[materielId] = {};

            syncUpload();

            function syncUpload() {
                var file = files[index];
                if (!file) return;
                $loadingToast.fadeIn(100);
                var imgCnt = Object.keys(uploaData[materielId]);
                if (imgCnt.length > 1) {
                    $loadingToast.fadeOut(100);
                    swal('最多上传2张图片');
                    return;
                }
                var img = document.createElement("img");
                var li = $('<li class="weui-uploader__file" style="padding:0;margin-right:5px;border:1px solid #cccccc63;text-align: center"></li>');
                var del = $('<img num=' + di + ' name="del" code="' + materielId + '" style="position: absolute; width: 20px; " src="/images/del.png">');
                //img.file = file;
                $(img).css({'width': '79px', 'height': '79px'});
                li.append(img);
                li.append(del);
                $(_this).parent().prev().append(li);
                //使用FileReader方法显示图片内容
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    dealImage(this.result, {width: 600}, function (base) {
                        //console.log(base);
                        uploadImage(base,function (data) {
                            console.log(data);
                            if(data.code == 200){
                                uploaData[materielId][di] = data.data;
                                img.src = base;
                                di++;
                                index++;
                                syncUpload();
                            }
                            $loadingToast.fadeOut(100);

                        });

                    });
                };
            }


            function dealImage(path, obj, callback){
                var img = new Image();
                img.src = path;
                img.onload = function(){
                    var that = this;
                    // 默认按比例压缩
                    var w = that.width,
                        h = that.height,
                        scale = w / h;
                    w = obj.width || w;
                    h = obj.height || (w / scale);
                    var quality = 1; // 值越大越清楚
                    //生成canvas
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    // 创建属性节点
                    var anw = document.createAttribute("width");
                    anw.nodeValue = w;
                    var anh = document.createAttribute("height");
                    anh.nodeValue = h;
                    canvas.setAttributeNode(anw);
                    canvas.setAttributeNode(anh);
                    ctx.drawImage(that, 0, 0, w, h);
                    // 图像质量
                    if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                        quality = obj.quality;
                    }
                    // quality值越小，所绘制出的图像越模糊
                    var base64 = canvas.toDataURL('image/jpeg', quality );
                    // 回调函数返回base64的值
                    callback(base64);
                }
            }

        });

        //提交确认
        $('#confirmReceipt').on('click',function () {
            var flg = 0, param = {list: [], imgData: uploaData};
            $('div[name=goodsBox]').each(function () {
                var materielId = $(this).find('input[name=materielId]').val();
                var deliverQty = $(this).find('input[name=deliverQty]').val();
                var amount = $(this).find('input[name=amount]').val();
                var remark = $('#remark'+materielId).val();
                if (amount == '' || !$.isNumeric(amount)) {
                    flg = 1;
                    return true;
                }
                if (deliverQty != amount) {
                    var imgCnt = uploaData[materielId] ? Object.keys(uploaData[materielId]) : 0;
                    if (!imgCnt) {
                        flg = 2;
                    }
                }
                param.list.push({materielId: materielId, amount: amount, remark: remark});
            });
            param['billNo'] = $('#billNo').val();
            if (flg == 1) {
                swal('请输入收货数量');
                return;
            }
            if (flg == 2) {
                swal('未全部收货的商品需要拍照上传');
                return;
            }
            receipt(param);
        });

        function receipt(param) {
            if ($loadingToast.css('display') == 'none') {
                $loadingToast.fadeIn(100);
                setTimeout(function () {
                    $loadingToast.fadeOut(100);
                }, 2000);
            }
            $.post('/order/receipt', param, function (o) {
                $loadingToast.fadeOut();
                if (o.code == 200) {
                    swal('操作成功');
                    setTimeout(function () {
                        location.href = '/order/list';
                    }, 1500);
                } else {
                    swal(o.msg);
                }
            },'json');
        }

        function uploadImage(imgbase64,callback) {
            $.post('/order/upload-image', {imgbase64:imgbase64}, function (o) {
               callback(o);
            },'json');
        }

    });
</script>
</body>
</html>
